<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table demo</title>
    <style>
        html,
        body {
            font-size: 12px;
        }

        .page_navigate {
            border: 1px solid #ccc;
            height: 40px;
            margin-bottom: 2px;
        }

        .page_navigate>span {
            margin-left: 20px;
            line-height: 40px;
            vertical-align: middle;
        }
        .page_search{
            height: 40px;
            border:1px solid #ccc;
            margin:2px 0px;
            text-align: center;
            padding-top:15px;
        }
        .myTable {
            width: 100%;
        }

        .myTable {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        .myTable td,
        .myTable th {
            height: 30px;
        }

        .myTable>thead>tr {
            background-color: rgb(78, 149, 241);
            color: white;
        }

        .myTable>tbody>tr:nth-child(odd) {
            background-color: ivory;
        }

        .myTable>tbody>tr:hover {
            cursor: pointer;
            background-color: lightpink;
        }

        .myTable td {
            text-align: center;
        }

        .buttonGroup {
            display: inline-block;
            cursor: pointer;
        }

        .divButton {
            display: inline-block;
            width: 20px;
            height: 20px;

            margin-left: 10px;
        }

        .divButton_text {
            line-height: 20px;
            vertical-align: 5px;
            margin: 0 2px;
        }

        .updateButton {
            background: url(../img/update.png) no-repeat 0px 0px/20px 20px;
        }

        .deleteButton {
            background: url(../img/delete.png) no-repeat 0px 0px/20px 20px;
        }

        .addButton {
            background: url(../img/insert.png) no-repeat 0px 0px/20px 20px;
        }
        .saveButton{
            background: url(../img/save.png) no-repeat 0px 0px/20px 20px;
        }

        .myTable>tfoot td {
            height: 40px;
        }

        .operationGroup {
            margin-top: 10px;
            margin-left: 10px;
            float: left;
            cursor: pointer;
        }

        .pageGroup {
            margin-right: 10px;
            float: right;
        }

        .pageNumber {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 2px solid #ccc;
            cursor: pointer;
            margin: 0 3px;
        }
        .pageNumber_disable {
            color: lightgray;
            cursor: default;
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 2px solid #ccc;
            margin: 0 3px;
        }
        .pageNumber:active {
            box-shadow: #ccc 0px 0px 1px;
        }

        .pageNumber_text {
            line-height: 30px;
            vertical-align: middle;
            font-weight: 600;
            user-select: none;
        }

    </style>
</head>

<body>
    <main>
        <nav class="page_navigate">
            <span>nnblog&nbsp;>&nbsp;用户管理模块&nbsp;>&nbsp;用户信息管理</span>
        </nav>
        <aside class="page_search">
            <input type="search" style="margin-right:10px;height: 30px;"><button style="height:30px;width:60px;">查询</button>
        </aside>
        <table class="myTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>密码</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>email</th>
                    <th style="width: 200px;">操作</th>
                </tr>
            </thead>
            <tbody id="myTbody">
                <tr id="row_1">
                    <td data-edit-disable="false">1</td>
                    <td>admin</td>
                    <td>悔创阿里Jack马</td>
                    <td>123</td>
                    <td>男</td>
                    <td>2342342</td>
                    <td>adminMA@qq.com</td>
                    <td  data-edit-disable="false">
                        <nav class="rowOperationGroup" data-id="1">
                            <div class="buttonGroup">
                                <div class="divButton updateButton" class="update"></div>
                            </div>
                            <div class="buttonGroup">
                                <div class="divButton deleteButton" class="delete"></div>
                            </div>
                        </nav>
                    </td>
                </tr>
                <tr id="row_2">
                    <td>2</td>
                    <td>test</td>
                    <td>一般家庭马化腾</td>
                    <td>321</td>
                    <td>男</td>
                    <td>23423424</td>
                    <td>test@qq.com</td>
                    <td>
                        <nav class="rowOperationGroup" data-id="2">
                            <div class="buttonGroup">
                                <div class="divButton updateButton" class="update"></div>
                            </div>
                            <div class="buttonGroup">
                                <div class="divButton deleteButton" class="delete"></div>
                            </div>
                        </nav>
                    </td>
                </tr>
                <tr id="row_3">
                    <td>3</td>
                    <td>manager</td>
                    <td>一无所有王健林</td>
                    <td>34234</td>
                    <td>男</td>
                    <td>564564</td>
                    <td>manager@qq.com</td>
                    <td>
                        <nav class="rowOperationGroup" data-id="3">
                            <div class="buttonGroup">
                                <div class="divButton updateButton" class="update"></div>
                            </div>
                            <div class="buttonGroup">
                                <div class="divButton deleteButton" class="delete"></div>
                            </div>
                        </nav>
                    </td>
                </tr>
                <tr id="row_4">
                    <td>4</td>
                    <td>administrator</td>
                    <td>全家最丑刘亦菲</td>
                    <td>223424</td>
                    <td>女</td>
                    <td>79787987</td>
                    <td>administrator@qq.com</td>
                    <td>
                        <nav class="rowOperationGroup" data-id="4">
                            <div class="buttonGroup">
                                <div class="divButton updateButton" class="update"></div>
                            </div>
                            <div class="buttonGroup">
                                <div class="divButton deleteButton" class="delete"></div>
                            </div>
                        </nav>
                    </td>
                </tr>
                <tr id="row_5">
                    <td>5</td>
                    <td>hr</td>
                    <td>北大还行撒贝宁</td>
                    <td>ewerwer</td>
                    <td>男</td>
                    <td>82793492734</td>
                    <td>hr@qq.com</td>
                    <td>
                        <nav class="rowOperationGroup" data-id="5">
                            <div class="buttonGroup">
                                <div class="divButton updateButton"></div>
                            </div>
                            <div class="buttonGroup">
                                <div class="divButton deleteButton"></div>
                            </div>
                        </nav>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="8">
                        <nav class="operationGroup" id="btn_addUser">
                            <div class="divButton addButton"></div>
                        </nav>
                        <nav class="pageGroup">
                            <div class="pageNumber_disable"><span class="pageNumber_text"><<</span> </div>
                                    <div class="pageNumber_disable"><span class="pageNumber_text">1</span></div>
                            <div class="pageNumber"><span class="pageNumber_text">2</span></div>
                            <div class="pageNumber"><span class="pageNumber_text">3</span></div>
                            <div class="pageNumber"><span class="pageNumber_text">4</span></div>
                            <div class="pageNumber"><span class="pageNumber_text">5</span></div>
                            <div class="pageNumber"><span class="pageNumber_text">>></span></div>
                        </nav>
                    </td>
                </tr>
            </tfoot>
        </table>
    </main>
</body>
</html>
<script>
    function updateUser(id){
        alert("update user:"+id);
    }
    function deleteUser(id){
        let flag=confirm("确定要删除该行吗？");
        if(flag){
            let row=document.getElementById(`row_${id}`);
            row.parentElement.removeChild(row);
        }
    }
    function operation(event){
        let value="";
        let id=0;
        let eventTarget=event.target;
        value=eventTarget.classList;
        id=eventTarget.parentNode.parentNode.dataset.id;
        if(eventTarget.classList.toString().includes("delete")){
            deleteUser(id);
        }
        if(eventTarget.classList.toString().includes("update")){
            updateUser(id);
        }
    }
    function editTable(event){
        let target=event.target;
        if(!target.dataset.editDisable&&event.target.nodeName.toLowerCase()!="nav"&&event.target.nodeName.toLowerCase()!="div"){
            let node=document.createElement("input");
            node.type="text";
            node.value=event.target.innerHTML;
            node.addEventListener("blur",event=>{
                target.innerHTML=event.target.value;
            },false);
            event.target.innerHTML="";
            event.target.appendChild(node);
        }
    }
    function addUserOperation(event){
        let row=document.createElement("tr");
        let rowNumber=document.getElementById("myTbody").lastElementChild.id.split("_")[1];
        row.id=`row_${Number.parseInt(rowNumber)+1}`;
        let td0=document.createElement("td");
        td0.innerHTML=Number.parseInt(rowNumber)+1;
        row.appendChild(td0);
        document.getElementById("myTbody").appendChild(row);
        for(let i=0;i<6;i++){
            let td=document.createElement("td");
            td.innerHTML="<input type='text' />";
            row.appendChild(td);
        }
        let tdx=document.createElement("td");
        let div=document.createElement("div");
        div.classList.add("divButton");
        div.classList.add("saveButton");
        div.addEventListener("click",event=>{
            let currentTr=event.target.parentElement.parentElement;
            let arrays=currentTr.getElementsByTagName("input");
            [...arrays].forEach(item=>{
                let text=item.value;
                item.parentElement.innerHTML=text;
            })
            event.target.parentElement.innerHTML="";
            //TODO: add button
        },false);
        tdx.appendChild(div);
        row.appendChild(tdx);
    }
document.getElementById("myTbody").addEventListener("click",operation,false);
document.getElementById("myTbody").addEventListener("dblclick",editTable,false);
document.getElementById("btn_addUser").addEventListener("click",addUserOperation,false);
</script>